<template>
  <view>
    <template v-if="goodsList.length !== 0">
      <view class="goods-box">
        <view
          v-for="(item, index) in goodsList"
          :key="index"
          @click="goToDetail(item)"
        >
          <goods-list :goods="item"></goods-list>
        </view>
      </view>
    </template>
    <!--    <template v-else>
      <view class="cart-empty">
        <image
          class="cart-empty-pic"
          src="@/static/search_noresults.png"
        ></image>
      </view>
    </template> -->
  </view>
</template>

<script>
export default {
  data() {
    return {
      queryObj: {
        //查询关键字
        query: '',
        //商品分类id，
        cid: '',
        //页码
        pagenum: 1,
        //每页数量
        pagesize: 10
      },
      goodsList: [],
      totals: 0,
      defaultPic:
        'https://img3.doubanio.com/f/movie/8dd0c794499fe925ae2ae89ee30cd225750457b4/pics/movie/celebrity-default-medium.png', //默认图片地址
      requestStatus: true //是否还能请求
    }
  },
  onLoad(options) {
    this.queryObj.query = options.query || ''
    this.queryObj.cid = options.cid || ''
    this.getGoodsList()
  },
  methods: {
    //获取商品列表
    async getGoodsList(isdropDown = false) {
      //isdropDown默认为fasle 是上拉
      this.requestStatus = false
      const { data } = await uni.$http.get(
        '/api/public/v1/goods/search',
        this.queryObj
      )
      //请求失败
      if (data.meta.status !== 200) return uni.$errShowMes()
      if (!data.message.goods.length > 0)
        return uni.showToast({
          title: '数据已加载完毕'
        })
      //判定是下拉还是上拉，true为下拉
      if (isdropDown) {
        this.goodsList.unshift(...data.message.goods)
        uni.stopPullDownRefresh()
      } else {
        this.goodsList.push(...data.message.goods)
      }
      this.totals = data.message.total
      this.requestStatus = true
    },
    //跳转详情页
    goToDetail(goods) {
      uni.navigateTo({
        url: `/subpkg/goods_detail/goods_detail?goods_id=${goods.goods_id}`
      })
    }
  },
  //上拉
  onReachBottom() {
    if (this.requestStatus) {
      this.queryObj.pagenum++
      this.getGoodsList()
    } else {
      uni.showToast({
        title: '数据已加载完毕'
      })
    }
  },
  //下拉
  onPullDownRefresh() {
    if (this.requestStatus) {
      this.queryObj.pagenum++
      this.getGoodsList(true)
    } else {
      uni.showToast({
        title: '数据已加载完毕'
      })
      uni.stopPullDownRefresh()
    }
  }
}
</script>

<style lang="scss">
.goods-box {
  padding: 0 2px;
}
.cart-empty {
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  .cart-empty-pic {
    width: 200px;
    height: 200px;
  }
}
</style>
